<template>
  <div id="shareWordList">
    <!-- 上部搜索条件 -->
    <topSearch
      v-if="liveTypeList"
      :form-inline="formInline"
      @toSearch="toSearch"
      :liveTypeList="liveTypeList"
    ></topSearch>
    <!-- 操作按钮部分 -->
    <div class="table-conBtn">
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table
      id="share-box"
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      max-height="700"
      ref="table"
    >
      <el-table-column type="index" width="50" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column prop="liveCode" label="场次编号" width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.liveCode">{{ scope.row.liveCode }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="开播时间" width="220">
        <template slot-scope="scope">
          <span>{{ scope.row.startTime }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="endTime" label="结束时间" width="220">
        <template slot-scope="scope">
          <span style="width: 100%;">{{ scope.row.endTime || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="liveTypeName" label="直播分类" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.liveTypeName || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="liveTitle" label="直播标题" width="350">
        <template slot-scope="scope">
          <span v-if="scope.row.liveTitle">{{ scope.row.liveTitle }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="livePic" label="直播封面" width="250">
        <template slot-scope="scope">
          <el-image
            v-if="scope.row.livePic"
            fit="cover"
            style="width: 150px; height: 100px"
            :src="scope.row.livePic"
            :preview-src-list="[scope.row.livePic]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="durationFormat" label="直播时长" width="170">
        <template slot-scope="scope">
          <span>{{ scope.row.durationFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="watchCountUv" label="观看人数" width="130">
        <template slot-scope="scope">
          <span>{{ scope.row.watchCountUv }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="likeCount" label="获赞数量" width="130">
        <template slot-scope="scope">
          <span>{{ scope.row.likeCount }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="giftCount" label="收获礼物" width="130">
        <template slot-scope="scope">
          <span>{{ scope.row.giftCount }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="watchCountPv" label="观看人次" width="130">
        <template slot-scope="scope">
          <span>{{ scope.row.watchCountPv }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="fansCount" label="新增粉丝" width="130">
        <template slot-scope="scope">
          <span>{{ scope.row.fansCount }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="channel" label="直播渠道" width="130">
        <template slot-scope="scope">
          <span v-if="scope.row.channel">{{
            filterName(scope.row.channel, 'live_streaming_channel')
          }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
  </div>
</template>
<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
import topSearch from './topSearch' // 上部搜索条件
import { uploadImg } from '@/api/common/img' // 接口
import { saveScrollMixins } from '@/mixins/saveScroll'
import { getLiveSession } from '@/api/anchor/live-session'
import { getLiveTypes } from '@/api/anchor/live-type'
export default {
  name: 'liveSessionManage-sub',
  msg: '直播场次管理-列表页',
  mixins: [saveScrollMixins],
  components: {
    topSearch
  },
  data() {
    return {
      rejectReasonData: null,
      rejectReasonVisible: false,
      fileList: [],
      closeForm: {
        closeMemo: '',
        closePic: '',
        id: ''
      },
      dialogFormVisible: false,
      loading: true,
      total: 0,
      // 搜索条件
      formInline: {
        liveTypeId: '', // 分类ID
        startTime: '', // 开始时间
        endTime: '' // 结束时间
      },
      // 表格数据
      tableData: [],
      // 分页数据
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      // 传递给新增弹框的数据
      addDialogData: {
        isShow: false, // 控制弹框显示
        params: '' // 参数
      },
      // 传递给导入弹框的数据
      importDialogData: {
        title: '创建分享语管理',
        isShow: false, // 控制弹框显示
        params: '' // 参数
      },
      // 导入失败弹框的数据
      errorDialogData: {
        isShow: false, // 控制弹框显示
        warningText: '' // 参数
      },
      // 选择框选中的数据
      multipleSelection: [],
      // 认证状态列表
      streamStatus: [],
      liveTypeList: []
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    this.getLiveTypesEvent('ENABLE')
    this.searchList()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
    this.getStatusList()
  },
  methods: {
    getLiveTypesEvent(status) {
      getLiveTypes(
        { status: 'ENABLE', parentId: 0, pageSize: 100 },
        (response) => {
          this.liveTypeList = response.rows
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    closeOption({ closeStatus, id }) {
      if (closeStatus === 'OPEN') {
        this.dialogFormVisible = true
        this.closeForm.id = id
      } else {
        this.$confirm('是否确认该用户解封直播间？', '解封直播')
          .then((_) => {
            patchLiveStreamerOpen(
              { id },
              (response) => {
                this.searchList()
              },
              (response) => {
                this.$message({
                  message: response.message,
                  type: 'warning'
                })
              }
            )
          })
          .catch(() => {})
      }
    },
    viewRejectReason(row) {
      this.rejectReasonData = row
      this.rejectReasonVisible = true
    },
    /* 字典英文转汉字 */
    filterName(id, name) {
      let obj = this.$store.state['valueTokey'][name]
      if (id && obj && obj[id]) {
        return obj[id].name
      }
      return ''
    },
    /* 获取字典状态 */
    async getStatusList() {
      //推流状态状态列表
      let data = await sysNormalDisable(
        'live_streaming_status',
        'live_streaming_status'
      )
      this.streamStatus = data
      //推流状态状态列表
      let closeStatus = await sysNormalDisable(
        'live_streamer_close_status',
        'live_streamer_close_status'
      )
      //推流状态状态列表
      let channel = await sysNormalDisable(
        'live_streaming_channel',
        'live_streaming_channel'
      )
      //推流状态状态列表
      let anchorResource = await sysNormalDisable(
        'live_streamer_from',
        'live_streamer_from'
      )
    },
    // 封禁主播
    patchLiveStreamerClose() {
      patchLiveStreamerClose(
        this.closeForm,
        (res) => {
          this.dialogFormVisible = false
          this.searchList()
        },
        (res) => {
          console.log(res)
        }
      )
    },
    /*上传图片之前，校验格式*/
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt1M = file.size / 1024 < 1024
      let text = ''
      if (!isJPG) {
        text += '上传图片只能是 JPG/PNG 格式!'
      }
      if (!isLt1M) {
        text += ' 上传图片大小不能超过1MB!'
      }
      if (!isJPG || !isLt1M) {
        this.$message.error(text)
      }
      return isJPG && isLt1M
    },
    // 图片上传
    changeUpload(file, fileList) {
      let flog = this.beforeUpload(file.raw)
      if (!flog) return
      let formData = new FormData()
      formData.append('file', file.raw)
      uploadImg(
        formData,
        (response) => {
          this.authForm.rejectPic = response[0].url
          this.fileList = [{ name: file.name, url: response[0].url }]
        },
        (response) => {
          this.$message.warning(response.message)
        }
      )
    },
    //移除图片
    handleRemove(file, fileList) {
      this.authForm.rejectPic = ''
      this.fileList = []
    },
    // 审核驳回弹窗显示
    rejectAuth(id) {
      this.authForm.id = id
      this.dialogFormVisible = true
    },
    // 审核通过
    authPass(id) {
      this.$confirm(`<span>是否确认该用户通过直播申请？</span>`, '通过申请', {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(() => {
          putLivesVerfyings(
            { id },
            (response) => {
              this.tableData = response.rows
              this.total = response.total
            },
            (response) => {
              this.$message({
                message: response.message,
                type: 'warning'
              })
            }
          )
        })
        .catch(() => {})
    },
    /* 获取权限 */
    getPower() {
      let id = this.$route.query.mId
      this.getCurPageMenu(id).then((res) => {
        this.powerAry = res
        this.canShowPage = true
        if (!res.includes(this.powerStr)) {
          this.canGetList = false
          this.alertPower(this.powerStr)
        }
        this.searchList()
      })
    },
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign(this.searchParams, this.formInline, {
        streamerId: this.$route.query.id
      })
      delete obj.createTime
      let params = obj
      getLiveSession(
        params,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 多个删除按钮
    deleteMult() {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning('请至少选择一条数据！')
        return
      }
      this.$confirm(
        `确认要删除选中的${this.multipleSelection.length}条数据吗?`,
        '删除提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        let ids = []
        if (this.multipleSelection.length === 1) {
          ids[0] = this.multipleSelection[0].id
          this.delItem(ids)
        } else {
          this.multipleSelection.forEach((item) => {
            ids.push(item.id)
          })
          this.delMulRequest(ids)
        }
      })
    },
    // 单个删除按钮
    deleteOne(id) {
      this.$confirm('确定删除该条分享语管理信息吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delItem([id])
      })
    },
    /* 删除单个请求 */
    delItem(ids) {
      deleteSingleRequest(
        ids,
        (response) => {
          this.searchList()
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* table选择 */
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /* 新增后，刷新列表 */
    refresh() {
      this.formInline = {
        liveTypeId: '',
        startTime: '',
        endTime: ''
      }
      this.toSearch()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    }
  }
}
</script>
<style lang="less">
#shareWordList {
  .el-table {
    margin-top: 20px;
  }
}
</style>
